<template>
  <div class="max1920">
    <div class="fixed flex items-center text-base text-white nav top-3"  @click.stop="void 0">
      <div class="nav-logo">
          <a href="/home/">
            <img :src="getAssetsFile('logo2.png')" alt="游成互动游戏平台" />
          </a>
        </div>
      <ul class="flex items-center text-white">
        <li class="line"></li>
        <li class="relative has-sub" :class="{ curr: curr === 'game' }">
          <span class="cursor-pointer">游戏</span>
          <div class="absolute submenu">
            <div class="triangle-up"></div>
            <ul>
              <li :class="{ curr: curr === 'qmxb' }">
                <a href="/qmxb/">全民学霸</a>
              </li>
              <li :class="{ curr: curr === 'mrz' }">
                <a href="/mrz/">美人传</a>
              </li>
            </ul>
          </div>
        </li>
        <li class="line"></li>
        <li class="relative has-sub" :class="{ curr: curr === 'about' }">
          <span class="cursor-pointer">企业文化</span>
          <div class="absolute submenu">
            <div class="triangle-up"></div>
            <ul>
              <li><a href="/about/">关于我们</a></li>
              <li><a href="/benefit/">公司福利</a></li>
            </ul>
          </div>
        </li>
        <li class="line"></li>
        <li :class="{ curr: curr === 'joinus' }">
          <a href="/joinus/">人才招聘</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'GlobalMenu',
  inheritAttrs: false,
  props: {
    curr: { type: String, default: '' }
  },
  setup() {
    return {
      getAssetsFile
    }
  }
})
function getAssetsFile(url) {
  return new URL(`../assets/${url}`, import.meta.url)
}
</script>

<style lang="scss" scoped>
.nav {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 1);
  color: #fff;
  right: 1rem;
  top: 1.6rem;
  z-index: 9;
  > ul {
    > li {
      padding: 12px 20px;
      cursor: pointer;
      font-size: 16px;
      &:hover {
        color: #fff;
        .submenu {
          display: block;
        }
      }
      &.curr {
        color: #cf1132;
        &.has-sub::after {
          border-top: 5px solid #cf1132;
        }
      }
      &.line {
        padding: 0;
        width: 0px;
        height: 20px;
        border-right: 1px solid #fff;
      }
      &.has-sub::after {
        content: '';
        display: inline-block;
        margin-left: 5px;
        vertical-align: middle;
        width: 0;
        height: 0;
        border-top: 5px solid #fff;
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        transition: all 0.2s ease-in;
      }
      &.has-sub:hover {
        &::after {
          transform: rotate(180deg);
          border-top: 5px solid #fff;
        }
      }
      .submenu {
        display: none;
        top: 100%;
        left: 50%;
        margin-top: 0px;
        transform: translateX(-50%);
        ul {
          padding: 6px 10px;
          background-color: rgba(0, 0, 0, 1);
          white-space: nowrap;
          border-radius: 6px;
          font-size: 0.8rem;
          color: #fff;
          > li {
            border-bottom: 1px dotted #fff;
            text-align: center;
            line-height: 2.4;
            &:hover {
              color: #cf1132;
            }
            &:last-child {
              border: 0;
            }
          }
        }
      }
    }
  }
}
.triangle-up {
  margin: 0 auto;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 6px solid rgba(0, 0, 0, 1);
}
.nav-logo{
  position:relative;
  padding:0 10px 0 4px;
  &::after{
    position: absolute;
    z-index: -1;
    top:-10px;
    left:-8px;
    content: "";
    width:64px;
    height:64px;
    border-radius: 50%;
    background-color: rgba(0,0,0,1);
  }
}
.max1920 {
  position: relative;
  margin: 0 auto;
  max-width: 1920px;
}
@media (min-width: 1921px) {
  .nav {
    position: absolute;
  }
}
</style>
